<template>
    <div>
        <div class="top-banner-back"><el-button type="primary" @click="toEdit()">新增</el-button></div>
        <div class="edu-table-lr">
            <el-table :data="tableData">
                <el-table-column prop="className" label="课程名称"></el-table-column>
                <el-table-column prop="classMoney" label="单价(元)"></el-table-column>
                <el-table-column prop="classType" label="班级类型"></el-table-column>
                <el-table-column prop="count" label="每期课次"></el-table-column>
                <el-table-column prop="classTime" label="上课时长(分钟)"></el-table-column>
                <el-table-column :render-header="renderHeader">
                    <template slot-scope="scope">
                        <el-button  type="primary" plain size="mini" @click="schoolCountClick(scope)">{{scope.row.schoolCount}}个校区</el-button> 
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" @click="toEdit(scope.row.id)">编辑</el-button> 
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="edu-pagination">
             <el-pagination background  v-if="pageCount>1"
             @size-change="handleSizeChange" 
             @current-change="handleCurrentChange" 
             :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="rowCount">
            </el-pagination>
        </div>

        <!-- 授权弹出层 -->
        <el-dialog :visible.sync="authorizeVisible" :title="'授权：'+authorizeName" :before-close="authorizeCancel"  width="680px" class="authorizeDialog" id="authorizeDialog">
            <el-table :data="authorizeData"  @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" width="100"></el-table-column>
                <el-table-column label="校区" prop="schoolName" show-overflow-tooltip></el-table-column>
                <el-table-column label="单价" >
                    <template slot-scope="scope">
                        <el-input v-model.number="scope.row.classMoney" size="small" class="width180" type="number"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="authorizeCancel">取 消</el-button>
                <el-button type="primary" @click="authorizeOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import common from "@/assets/js/common.js";
export default {
    data(){
        return{
            currentPage:1,
            tableData:[],
            curpage:1,
            pageSize:10,
            pageCount:1,
            authorizeVisible:false,
            authorizeName:'',
            authorizeData:[],
            multipleSelection:[],
            multipleSelectionId:[],
            multipleSelectionIndex:[],
            oldSelect:[],
            scope:{},
            ruleForm:{
                schoolClass:[{schoolName:'',classMoney:0}]
            }
        }
    },
    methods: {
         renderHeader(h) {
            return (
                <div class='el_popover_box' style="padding-left:0;line-height:0;position: relative;top: 3px;">
                    <span>授权</span>
                    <el-popover placement="right" popper-class='mebr_li' width="170" trigger="hover" >
                        <div class='change_color'>已授权的校区可对改课程创建报名活动</div>
                        <i  slot="reference" class="el-icon-warning ed-iconfont"></i>
                    </el-popover>    
                </div>
            )
        },

        loadData(curpage){
            let that = this
            common.ajax({
                'url': eduAPI.activeAPI.findClassList,
                'type': "GET",
                'data':{
                    curPage:curpage
                },
                'success': function(data) {
                    console.log(data,'查询校区数据');
                    if (data.data) {
                        that.tableData = data.data.subList
                        for(let i = 0; i < data.data.subList.length; i++){
                            if( data.data.subList[i].classType == 0){
                                data.data.subList[i].classType = '一对一'
                            }else{
                                data.data.subList[i].classType = '集体班'
                            }
                        }
                        that.pageSize = data.data.pageSize
                        that.pageCount = data.data.pageCount
                        that.rowCount = data.data.rowCount
                    }
                }
            });
        },
        toEdit(id){
            if(!id){ id = ''}
            this.$router.push({name:'courseSettingEdit', params:{id:id}})
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
            this.curpage = val
            this.loadData(val)
        },
        //校区查询
        schoolCountClick(scope){
            let that = this
            that.authorizeVisible = true
            parent.parent.parent.window.postMessage("openMask()", "*");
            that.scope = scope
            that.authorizeName = scope.row.className
            document.getElementById('authorizeDialog').getElementsByClassName('el-dialog')[0].className += ' scrollBar'
            common.ajax({
                'url': eduAPI.activeAPI.findSchoolClassList,
                'type': "POST",
                'data':{
                    classId:scope.row.id
                },
                'success': function(data) {
                    console.log(data,'查询校区授权数据');
                    that.authorizeData = data.data
                    if(scope.row.schoolCount != 0){
                        for(let i = 0; i < data.data.length;i++){
                            if(data.data[i].schoolClassId){
                               console.log(data.data[i],'data.data[i]')
                               that.oldSelect.push(data.data[i])
                                that.$nextTick(()=>{
                                        that.$refs.multipleTable.toggleRowSelection(data.data[i]);
                                })  
                            }
                        }
                    }
                }
            });
        },
        //授权选择事件
        handleSelectionChange(val){
            this.multipleSelection = val
        },
        //授权弹框取消
        authorizeCancel(){
            this.authorizeVisible = false
            parent.parent.parent.window.postMessage("closeMask()", "*");
            let classList = document.getElementById('authorizeDialog').getElementsByClassName('el-dialog')[0]
            if(classList.classList.contains('scrollBar')==true){
                classList.className = classList.className.replace('scrollBar','')
            }
        },
        //授权弹框确定
        authorizeOk(){
            let that = this
            let delArr = []
            that.multipleSelectionId = []
            for(let i = 0; i < that.multipleSelection.length;i++){
                that.multipleSelection[i].classId = that.scope.row.id
                if(that.multipleSelection[i].schoolClassId){
                    that.multipleSelection[i].id = that.multipleSelection[i].schoolClassId
                    that.multipleSelectionId.push(that.multipleSelection[i].schoolClassId)
                }
                if(!that.multipleSelection[i].classMoney || that.multipleSelection[i].classMoney <= 0){
                    that.$message({
                        showClose: true,
                        type: 'warning',
                        message: '请输入正确的单价值!'
                    });
                    return
                }
            }
            for(let i = 0; i < that.oldSelect.length;i++){
                if(that.multipleSelectionId.indexOf(that.oldSelect[i].schoolClassId)==-1){
                    delArr.push(that.oldSelect[i].schoolClassId)
                }
            }
            
            console.log(that.multipleSelection,'multipleSelection')
            console.log(that.multipleSelectionId,'multipleSelectionId')
            console.log(that.oldSelect,'oldSelect')
            console.log(delArr,'delArr')
            // return
            common.ajax({
                'url': eduAPI.activeAPI.saveSchoolClass,
                'type': "POST",
                'data':{
                    schoolClass: JSON.stringify(that.multipleSelection)
                },
                'success': function(data) {
                    console.log(data,'保存校区授权数据');
                    that.authorizeVisible = false
                    parent.parent.parent.window.postMessage("closeMask()", "*");
                    that.$message({
                        showClose: true,
                        type: 'success',
                        message: '授权成功'
                    });
                    if(delArr.length>0){
                        common.ajax({
                            'url': eduAPI.activeAPI.delSchoolClass,
                            'type': "POST",
                            'data':{
                                ids: delArr.join(',')
                            },
                            'success':function(data){
                                that.loadData(that.curpage)
                            }
                        })
                    }
                },
            });
        },
    },

    mounted(){
        this.loadData(this.curpage)
    }
}
</script>
